<template>
  <div class="dashboard-container">
    <div class="app-container">
      <page-tools :show-before="true">
        <span slot="before">2021</span>
        <template slot="after">
          <el-button
            @click="$router.push('/employees/import')"
            size="small"
            type="danger"
            >批量导入</el-button
          >
          <el-button @click="addStaff" size="small" type="primary"
            >新增员工</el-button
          >
        </template>
      </page-tools>
      <!-- 放置表格和页面 -->
      <el-card v-loading="loading">
        <el-table border :data="list">
          <el-table-column label="序号" sortable="" type="index" />
          <el-table-column label="头像">
            <template slot-scope="{ row }">
              <img
                @click="showCode(row.staffPhoto)"
                v-errImage="require('@/assets/common/bigUserHeader.png')"
                class="staffPhoto"
                :src="row.staffPhoto"
                alt=""
              />
            </template>
          </el-table-column>
          <el-table-column label="姓名" sortable="" prop="username" />
          <el-table-column label="工号" sortable="" prop="workNumber" />
          <el-table-column label="聘用形式" sortable="" prop="formOfEmployment">
            <template slot-scope="{ row }">
              {{ row.formOfEmployment | turnHireType }}
            </template>
          </el-table-column>
          <el-table-column label="部门" sortable="" prop="departmentName" />
          <el-table-column label="入职时间" sortable="" prop="timeOfEntry">
            <template slot-scope="{ row }">
              {{ row.timeOfEntry | reltTime }}
            </template>
          </el-table-column>
          <el-table-column label="账户状态" sortable="" prop="enableState" />
          <el-table-column label="操作" fixed="right" width="280">
            <template slot-scope="{ row }">
              <el-button type="text" size="small" @click="toDetail(row.id)"
                >查看</el-button
              >
              <el-button type="text" size="small">转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button @click="openRole(row.id)" type="text" size="small"
                >角色</el-button
              >
              <el-button
                @click="deleteEmployee(row.id)"
                type="text"
                size="small"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row
          type="flex"
          justify="center"
          align="middle"
          style="height: 60px"
        >
          <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            :page-size="page.size"
            :current-page="page.page"
            :total="page.total"
            @current-change="changePage"
            @size-change="sizechange"
          />
        </el-row>
      </el-card>
    </div>
    <!-- 放置新增弹层组件 -->
    <add-staff :show-dialog.sync="showDialog" @updatedata="getEmployeeList" />
    <!-- 显示二维码的面板 -->
    <el-dialog title="图片二维码" :visible.sync="isVisible">
      <canvas ref="mycanvas" />
    </el-dialog>
    <!-- 显示分配角色的面板 -->
    <el-dialog title="分配角色" :visible.sync="roleDialog">
      <el-checkbox-group v-model="checkList">
        <el-checkbox
          v-for="(item, index) in roleList"
          :key="index"
          :label="item.id"
          >{{ item.name }}</el-checkbox
        >
      </el-checkbox-group>
      <div slot="footer" style="text-aligin: center">
        <el-button @click="submit" type="primary">确定</el-button>
        <el-button @click="roleDialog = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import QrCode from "qrcode";
import {
  getEmployeeList,
  deleteEmployee,
  getUserInfoApi,
  sysUserAssignRolesApi,
} from "@/api/employees";
import { getRoleListApi } from "@/api/role.js";
import AddStaff from "./components/add-staff.vue";
export default {
  components: {
    AddStaff,
  },
  data() {
    return {
      isVisible: false, //二维码弹窗
      loading: false, //加载
      showDialog: false, //新增弹窗
      roleDialog: false, //分配角色
      checkList: [], //选中的多选框元素
      roleList: [], //定义角色列表
      userId: "", // 当前操作的用户 id
      list: [],
      page: {
        page: 1,
        size: 10,
        total: 0,
      },
      node: {},
    };
  },

  created() {
    this.getEmployeeList();
    // 得到所有的角色信息
    this.getAllRole();
  },
  methods: {
    //获取员工综合信息
    getEmployeeList() {
      this.loading = true;
      setTimeout(async () => {
        const res = await getEmployeeList();
        // console.log("员工综合信息", res);
        const { total, rows } = await getEmployeeList(this.page);
        this.page.total = total;
        this.list = rows;
        this.loading = false;
      }, 500);
    },
    //删除员工
    async deleteEmployee(id) {
      try {
        await this.$confirm("确认删除该员工吗");
        await deleteEmployee(id);
        this.getEmployeeList();
        this.$message.success("已删除该员工");
      } catch (error) {
        console.log(error);
      }
    },
    //修改当前页码
    changePage(page) {
      this.page.page = page; //当前页码赋值给新页码
      this.getEmployeeList();
    },
    //修改页容量
    sizechange(size) {
      this.page.size = size;
      this.getEmployeeList();
    },
    //显示窗口
    addStaff(node) {
      this.showDialog = true;
      this.node = node;
    },
    // 显示二维码
    showCode(imgUrl) {
      if (imgUrl) {
        this.isVisible = true;
        this.$nextTick(() => {
          QrCode.toCanvas(this.$refs.mycanvas, imgUrl, {
            width: 200,
            height: 200,
          });
        });
      } else {
        this.$message.error("暂无图片");
      }
    },
    // 得到所有的角色列表
    async getAllRole() {
      const res = await getRoleListApi();
      this.roleList = res.rows;
    },
    //打开面板分配角色
    async openRole(id) {
      this.userId = id;
      //根据当前点击用户的id得到基本信息中的角色信息
      const res = await getUserInfoApi(id);
      // console.log("res", res);
      //得到当前员工的基本信息中的角色信息,赋值给checkList
      this.checkList = res.roleIds || []; //加个判断
      this.roleDialog = true;
    },
    //跳转到详情页
    toDetail(id) {
      this.$router.push(`/employees/detail?id=${id}`);
    },
    //修改员工角色
    async submit() {
      try {
        await sysUserAssignRolesApi({
          id: this.userId, //修改角色的员工id
          roleIds: this.checkList, //选中角色的id列表
        });
        //提示成功
        this.$message.success("修改角色成功");
        //关闭面板
        this.roleDialog = false;
      } catch {
        console.log("网络错误");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
  // .mycard {
  //   margin-top: 20px;
  //   .el-pagination {
  //     text-align: right;
  //     margin-top: 20px;
  //   }
  .staffPhoto {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    // object-fit: contain;
  }
  // }
}
</style>
